<template>
	<view>
		<u-sticky>
			<view class="topWrapper" v-if="false">
				<tabs  :currentCode="bizType" @selectedItemCode="selectedCode"></tabs>
				<u-line></u-line>
				<view class="subTitleBox">
					<text>可开票订单</text>
					<view class="" v-if="false">
						<text>订单筛选</text>
						<image src="../static/filter.png" style="width: 24upx; height: 24upx;"></image>
					</view>

				</view>
			</view>
		</u-sticky>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" bottom="90rpx">
			<view class="contentWrapper">
				<view class="listItem" v-for="(item,index) in noInvoiceList" :key="item.orderNo" @click.stop="selectedOrderItem(item)">
					<view class="order">
						<text>订单类型:{{item.orderType}}</text>
						<text>¥{{item.amount}}</text>
					</view>
					<view class="time">
						下单时间:{{item.createTime}}
					</view>
					<image class="selectedMark" :src="item.selected == true ? '../static/radio_selected.png' : '../static/radio-default.png'" mode=""></image>
				</view>
			</view>
		</mescroll-body>
		
		
		<!-- 底部总金额确认 -->
		<view class="bottomWrapper">
			<view class="totalPriceContent">
				<view>
					<text class="value">{{selectedOrderNum}}</text>
					<text class="title">个行程,共</text>
					<text class="value">{{invoiceTotalPrice}}</text>
					<text class="title">元</text>
				</view>
				<view class="allSelected" @tap="allSelected">
				    <image  :src="isSelectedAll == true ? '../static/radio_selected.png' : '../static/radio-default.png'" mode=""></image>
					全选
				</view>
			</view>
			<view class="nextBtn" @tap="clickNext">
				下一步
			</view>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		noInvoice
	} from '@/api/invoice-api.js'
	import tabs from '@/pagesC/components/tabs.vue'
	export default {
		components: {
			tabs
		},
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				noInvoiceList: [],
				bizType:1,
			}
		},
		computed: {
		   selectedOrders() {
			 var orders=[];
			   this.noInvoiceList.forEach((item)=> {
				   if(item.selected) {
					  orders.push(item);   
				   }
			   })
			 return orders;
		   },
		   
		   selectedOrderNum() {
			   return this.selectedOrders.length;
		   },
		   isSelectedAll() {
			   var invoiceNum = this.noInvoiceList.length;
			   if(this.selectedOrderNum == invoiceNum && invoiceNum > 0) {
				   return true;
			   }else {
				   return false;
			   }
		   },
		   invoiceTotalPrice() {
			   var totalPrice = 0.00;
			   this.selectedOrders.forEach((item)=> {
				   totalPrice += item.amount;
			   })
			   return totalPrice;
		   }
		},
		watch:{
		   	
		},
		onLoad(op) {
           this.bizType = op.type;
		},
		methods: {
			selectedCode(code) {
				this.bizType = code;
				this.mescroll.triggerDownScroll();
			},
			upCallback(page) {
				noInvoice({
					bizType: this.bizType,
					pageNo: page.num,
					pageSize: page.size
				}).then(res => {
					this.mescroll.endSuccess(res.data.length);
					//设置列表数据
					if (page.num == 1) this.noInvoiceList = []; //如果是第一页需手动制空列表
					this.noInvoiceList = this.noInvoiceList.concat(res.data); //追加新数据
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//选择订单
			selectedOrderItem(item) {
				item.selected  = !item.selected;
				this.noInvoiceList = [...this.noInvoiceList];//为了触发计算属性重新计算
				this.$forceUpdate();
				
			},
			//全选
			allSelected() {
				if(this.noInvoiceList.length > 0) {
					if(this.isSelectedAll) {
						this.noInvoiceList.forEach((item)=> {
							item.selected = false;
						})
					}else {
						this.noInvoiceList.forEach((item)=> {
							item.selected = true;
						})
					}
					this.noInvoiceList = [...this.noInvoiceList];//为了触发计算属性重新计算
				}else {
					this.$u.toast('没有可开票的订单');
				}
			},
			// 下一步
			clickNext() {
				if(this.selectedOrderNum > 0) {
					var orders = [];
					this.selectedOrders.forEach((item)=> {
					    orders.push(item.orderNo);
					})
					let orderStr = orders.join(',');
					uni.navigateTo({
						url: './invoice-apply?bizNo=' + orderStr + '&bizType=' + this.bizType+'&totalPrice=' + this.invoiceTotalPrice
					})
				}else {
					this.$u.toast('请至少选择一个订单进行开票');
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: $bg-white-color;

		.subTitleBox {
			padding: 20upx;
			display: flex;
			justify-content: space-between;

			text {
				font-size: 26upx;
				color: $text-color-33;
			}
		}
	}

	.contentWrapper {
		padding: 20upx;

		.listItem {
			background-color: $bg-white-color;
			border-radius: 16upx;
			padding: 46upx 46upx 46upx 66upx;
            margin-bottom: 10upx;
			position: relative;
			.order {
				display: flex;
				justify-content: space-between;

				text {
					color: $text-color-33;
					font-size: 26upx;
				}

				text:nth-child(2) {
					color: $text-color-price;
				}
			}

			.time {
				margin-top: 10upx;
				color: $text-color-33;
				font-size: 26upx;
			}
			
			.selectedMark {
				width: 32upx;
				height: 32upx;
				position: absolute;
				left: 20upx;
				top: 64upx;
			}
		}
	}
	
	.bottomWrapper {
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120upx;
		width: 100%;
		background-color: $bg-white-color;
		.totalPriceContent {
	
			.title {
				font-size: 30upx;
				color: $text-color-33;
			}
	
			.value {
				margin-top: 20upx;
				margin-left: 10upx;
				font-size: 30upx;
				color: $text-color-price;
	
			}
	
			.allSelected {
				margin-top: 10upx;
				font-size: 24upx;
				color: $main-color;
				display: flex;
				align-items: center;
				image{
					width: 32upx;
					height: 32upx;
					margin-right: 10upx;
				}
			}
		}
	
		.nextBtn {
			width: 330upx;
			height: 90upx;
			line-height: 90upx;
			text-align: center;
			color: $text-color-ff;
			background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
			border-radius: 45upx;
		}
	
	}
</style>
